<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import type { TuiContainerProps } from './types';

// 设置默认值
const props = withDefaults(defineProps<TuiContainerProps>(), {
  direction: undefined
});

// 获取容器引用
const containerRef = ref<HTMLDivElement>();

// 使用ref存储实际方向，确保在组件挂载后能准确更新
const actualDirection = ref<'horizontal' | 'vertical'>('horizontal');

// 计算容器类名
const containerClass = computed(() => {
  return `tui-container tui-container--${actualDirection.value}`;
});

// 当组件挂载后，准确判断布局方向
onMounted(() => {
  // 再次检查容器是否存在
  if (!containerRef.value) {
    return;
  }
  
  // 检查直接子元素中是否包含tui-header或tui-footer
  const hasHeader = containerRef.value.querySelector(':scope > .tui-header') !== null;
  const hasFooter = containerRef.value.querySelector(':scope > .tui-footer') !== null;
  // 如果包含header或footer，设置为vertical方向
  // 否则（如两侧边栏布局）设置为horizontal方向
  actualDirection.value = hasHeader || hasFooter ? 'vertical' : 'horizontal';
});
</script>

<template>
  <div ref="containerRef" :class="containerClass">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.tui-container {
  display: flex;
  box-sizing: border-box;
  width: 100%;

  &--horizontal {
    flex-direction: row;
  }

  &--vertical {
    flex-direction: column;
  }
}
</style>